<template>
    <div class="app-head">
        <div class="mask"
         :style="{'opacity': bgopacity}"></div>
        <span :style="{'opacity': textopacity}">Tarma Music</span>
    </div>
</template>

<script>
export default {
    name: "appHead",
    data() {
        return {
            bgopacity: "",
            textopacity: ""
        }
    },
    methods: {
        scrollHead() {
            let scrollV = document.documentElement.scrollTop || document.body.scrollTop;
            let scrollH = 200;
            if (scrollV <= scrollH) {
                this.bgopacity = (scrollV/scrollH)*0.8;
                this.textopacity = (scrollV/scrollH);
            } else {
                this.bgopacity = 0.8;
                this.textopacity = 1;
            }
        }
    },
    created() {
        addEventListener("scroll", this.scrollHead)
    }
}
</script>

<style lang="scss" scoped>
.app-head {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    .mask {
        width: 100%;
        height: 100%;
        background-color: #121212;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 11;
    }
    span {
        font-size: 18px;
        opacity: 0;
        z-index: 12;
    }
}
</style>